<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if与v-show</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="d1">
    <h1>1. v-if用法：<hr></h1>
    <p v-if="score > 90">优秀</p>
    <p v-else-if="score > 80">良好</p>
    <p v-else-if="score > 70">一般</p>
    <p v-else-if="score > 60">及格</p>
    <p v-else>不及格</p>
    <h1>2. v-if与v-show的区别<hr></h1>
    <!--当变量bool为false时，v-if会删除原来的p标签，而v-show仅仅对原来的p标签进行了隐藏(display:none)
        性能上：v-show比v-if更优秀！
    -->
    <p v-show='bool'>v-show控制的标签</p>
    <p v-if='bool'>v-if控制的标签</p>
    <button @click ='bool=!bool'>显示和隐藏</button>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '.d1',
    data:{
      score: 88,
      bool:false,
    },
    methods:{

    },

  })
</script>
